<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        
    </style>
</head>
<body>
    <table border="1" width="400" align="center">
        <tr>
            <td>data</td>
            <td>data</td>
            <td>data</td>
            <td>data</td>
        </tr>
        <tr>
            <td>data</td>
            <td>data</td>
            <td>data</td>
            <td>data</td>
        </tr>
        <tr>
            <td>data</td>
            <td>data</td>
            <td>data</td>
            <td>data</td>
        </tr>
    </table>
</body>
<script>

    var tds = document.querySelectorAll("td");

    for(var i=0;i<tds.length;i++){
        // 绑定点击事件
        tds[i].onclick = function(){
            // 创建输入框
            var ipt = document.createElement("input");
            // 获取原td内容设置给输入框
            ipt.value = this.innerHTML;
            // 清空td内容
            this.innerHTML = "";
            // 将输入框插入到td
            this.appendChild(ipt);
            // 输入框的点击事件要阻止事件冒泡
            ipt.onclick = function(eve){
                var e = eve || window.event;
                if(e.stopPropagation){
                    e.stopPropagation();
                }else{
                    e.cancelBubble = true;
                }
            }
            // 将this获取到的当前td保存到变量中，以备在其他函数中使用
            // 因为this在其他函数中的指向就被改变了
            var td = this;
            // 输入框失去焦点时
            ipt.onblur = function(){
                // 将输入框的内容设置给当前td
                td.innerHTML = this.value;
            }
        }
    }


    
</script>
</html>